<template>
  <div class="home">
    <van-button
      v-for="(item, index) in state.list"
      :key="index"
      :type="item.type" 
      @click="$router.push({ name: item.router })"
      block
    >
      {{ item.text }}
    </van-button>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue';


const state = reactive({
  list: [
    {
      type: 'primary',
      router: 'EggMachine',
      text: '扭蛋机'
    },
    {
      type: 'success',
      router: 'RoundAbout',
      text: '大转盘'
    }
  ]
})

</script>

<style lang="less" scoped>
.home {
  width: 375px;
  margin: 0 auto;
  button {
    margin: 10px 0;
  }
}
@media (max-width: 375px)  {
  .home {
    width: 100vw;
  }
}
</style>